<template>
  <a-modal
    :visible="visible"
    :title="$t('对账记录详情')"
    @cancel="handleClose"
    :footer="false"
  >
    <a-descriptions :column="2" size="small" bordered>
      <a-descriptions-item :label="$t('批次号')">
        {{ record?.batchNo }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('订单号')">
        {{ record?.orderNo }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('匹配状态')">
        <a-tag :color="record?.matched ? 'green' : 'red'">
          {{ record?.matched ? $t('已匹配') : $t('未匹配') }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item :label="$t('导入金额')">
        <span :class="{ 'text-red': record?.amountDiff !== 0 }">
          ¥{{ record?.amount ? record.amount.toFixed(2) : '0.00' }}
        </span>
      </a-descriptions-item>
      <a-descriptions-item :label="$t('系统金额')">
        <span :class="{ 'text-red': record?.amountDiff !== 0 }">
          ¥{{ record?.systemAmount ? record.systemAmount.toFixed(2) : '0.00' }}
        </span>
      </a-descriptions-item>
      <a-descriptions-item :label="$t('差异金额')">
        <span class="text-red" v-if="record?.amountDiff !== 0">
          ¥{{ record?.amountDiff.toFixed(2) }}
        </span>
        <span v-else>-</span>
      </a-descriptions-item>
      <a-descriptions-item :label="$t('对账人')">
        {{ record?.reconciliationBy }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('对账时间')">
        {{ record?.reconciliationTime }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('备注')" :span="2">
        {{ record?.remark || '-' }}
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script lang="ts" setup>
import type { OrderReconciliationVO } from '@/api/order/reconciliation/types';

const props = defineProps<{
  visible: boolean;
  record: OrderReconciliationVO | null;
}>();

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
}>();

// 关闭
function handleClose() {
  emit('update:visible', false);
}
</script>

<style scoped lang="less">
.text-red {
  color: #FF4D4F;
}
</style> 